<template>
  <div class="main-container" >
      <router-view v-if="!browser"></router-view>
      <Browser v-else-if="browser"></Browser>
      <!--<lg-preview></lg-preview>-->
      <login-content></login-content>
      <masking></masking>
    <div id="loginNotify" style="display: none">
      <iframe src="https://www.7moor.com/message"></iframe>
    </div>
    <export v-show="globalExport.show && globalExport.list.length !== 0"></export>
  </div>
</template>
<script>
  import { mapState } from 'vuex'
  import Browser from '@/components/business-modules/login/Browser'
  import masking from '@/components/ui-modules/mask/index'
  import loginContent from '@/components/business-modules/login/LoginContent.vue'
  import Export from '@/components/public-modules/export/index.vue'
  export default {
    name: 'app',
    data () {
      return {
        browser: false
      }
    },
    components: {
      Export,
      masking,
      Browser,
      loginContent
    },
    computed: {
      ...mapState({
        login: 'login',
        globalExport: 'globalExport'
      })
    },
    methods: {
      // 关于活动相关的内容
      handleActive (_obj) {
        let iframeMessage = {
          loginMessage: {
            loginBg: '',
            loginLeftPhoto: ''
          },
          zjkf: {
            url: ''
          },
          footerConfig: {
            updateUrl: _obj && _obj.loginConfig && _obj.loginConfig.footer ? _obj.loginConfig.footer.updateUrl : '',
            showWxHelper: _obj && _obj.loginConfig && _obj.loginConfig.footer ? _obj.loginConfig.footer.showWxHelper : '',
            iosAppUrl: _obj && _obj.loginConfig && _obj.loginConfig.footer ? _obj.loginConfig.footer.iosAppUrl : '',
            androidAppUrl: _obj && _obj.loginConfig && _obj.loginConfig.footer ? _obj.loginConfig.footer.androidAppUrl : '',
            andVer: _obj && _obj.loginConfig && _obj.loginConfig.footer ? _obj.loginConfig.footer.andVer : ''
          },
          showBusinessCreateTime: _obj && _obj.showBusinessCreateTime ? _obj.showBusinessCreateTime : false
        }
        if (_obj && _obj.loginConfig) {
          iframeMessage.loginMessage.loginBg = _obj.loginConfig.loginBg ? _obj.loginConfig.loginBg : iframeMessage.loginMessage.loginBg
          iframeMessage.loginMessage.loginLeftPhoto = _obj.loginConfig.loginLeftPhoto ? _obj.loginConfig.loginLeftPhoto : iframeMessage.loginMessage.loginLeftPhoto
          let startDate = Date.parse(new Date(_obj.loginConfig.activeObj.bTime))
          let endDate = Date.parse(new Date(_obj.loginConfig.activeObj.eTime))
          let date = Date.parse(new Date())
          if (date > startDate && date < endDate) {
            iframeMessage.zjkf.url = _obj.loginConfig.activeObj.url
          }
        }
        this.$store.commit('IFRAMEMESSAGE', iframeMessage)
      },
      // 报表有前端导出和后端导出，如果前端导出有问题，可以不用升级，就切换到后端的导出
      // handleExport (_obj) {
      //   let _flag = ''
      //   if (_obj.exportFromFront) {
      //     _flag = _obj.exportFromFront
      //   } else {
      //     _flag = 'End'
      //   }
      //   this.$store.commit('XLSXEXPORTMODE', _flag)
      // },
      // 解决系统中因为样式问题，不用升级就能恢复
      handleStyle (_obj) {
        if (_obj.emergentStyle && _obj.emergentStyle !== '') {
          if (document.getElementById('emergentStyle')) {
            let _dom = document.getElementById('emergentStyle')
            _dom.innerHTML = ''
            _dom.innerHTML = _obj.emergentStyle
          }
        }
        if (_obj.loginConfig && _obj.loginConfig.loginStyle) {
          if (document.getElementById('loginStyle')) {
            let _dom = document.getElementById('loginStyle')
            _dom.innerHTML = ''
            _dom.innerHTML = _obj.loginConfig.loginStyle
          }
        }
      },
      // 登录之后，有一个提示有新的升级，是否要刷新页面
      handleRefreshPage (_obj) {
        if (_obj.refresh && _obj.refresh === true) {
          window.sessionStorage.setItem('refreshPage', true)
        } else {
          window.sessionStorage.setItem('refreshPage', false)
        }
      },
      // 登录页系统通知的内容
      handleNotify (_obj) {
        let iframeNotify = {
          updateVer: {
            updateVer: false,
            updateTime: ''
          },
          notify: {},
          notifyFlag: false
        }
        if (_obj.notify.content && _obj.notify.content !== '') {
          iframeNotify.notify = _obj.notify
          iframeNotify.notifyFlag = true
        }
        // 版本version的updateVer是登录页的版本更新的小红点
        // 登录后有一个通知版本更新的通知，version.updateTime是什么时候更新
        if (_obj.version) {
          // 首先判定本地的local是否保存啦更新时间，如果没有直接取通知里面的时间
          if (window.localStorage.getItem('notifyVersionUpdate')) {
            let _VersionObj = JSON.parse(window.localStorage.getItem('notifyVersionUpdate'))
            // 如果本地的时间等于版本的时间
            if (_VersionObj.updateTime === _obj.version.updateTime) {
              // 如果updateVer为true，说明用户在登录页没有点击过版本更新，还是为true, 否则的话改为false
              if (_VersionObj.updateVer) {
                iframeNotify.updateVer = {
                  updateVer: true,
                  updateTime: _obj.version.updateTime
                }
              } else {
                iframeNotify.updateVer = {
                  updateVer: false,
                  updateTime: _obj.version.updateTime
                }
              }
            } else {
              // 如果不相等，说明有更新
              iframeNotify.updateVer = {
                updateVer: true,
                updateTime: _obj.version.updateTime
              }
            }
          } else {
            iframeNotify.updateVer = _obj.version
          }
        }
        this.$store.commit('IFRAMENOTIFY', iframeNotify)
      },
      receiveMessage (event) {
        if (event.origin !== 'https://www.7moor.com') {
          return false
        }
        const obj = JSON.parse(event.data)
        let _obj = {}
        const aliArr = ['kf.7moor.com', 'kf7.7moor.com', 'cc.7moor.com']
        const originUrl = window.location.origin.split('://')[1]
        if (aliArr.indexOf(originUrl) > -1) { // 阿里云
          _obj = obj.ali
        } else if (originUrl === 'ykf.7moor.com') { // 腾讯云
          _obj = obj.tencent
        } else { // 测试环境
          _obj = obj
        }
        // 解决系统中因为样式问题，不用升级就能恢复
        this.handleStyle(_obj)
        // 登录之后，有一个提示有新的升级，是否要刷新页面
        this.handleRefreshPage(_obj)
        // 处理报表导出前后端按钮方法
        // this.handleExport(_obj)
        this.handleActive(_obj)
        // 登录页系统通知的内容
        this.handleNotify(_obj)
        // event.source 是我们通过window.open打开的弹出页面 popup
        // event.data 是 popup发送给当前页面的消息 "hi there yourself!  the secret response is: rheeeeet!"
      }
    },
    beforeMount () {
      if (window.addEventListener) {
        window.addEventListener('message', this.receiveMessage)
      } else {
        window.attachEvent('onmessage', this.receiveMessage)
      }
    },
    beforeDestroy () {
      window.removeEventListener('message', this.receiveMessage)
    },
    created () {
      // 判断没有fetch的浏览器 建议跟换浏览器登录
      if (!window.fetch) {
        this.browser = true
      }
    }
  }
</script>
<style lang="stylus">
#app
  width 100vw
  height 100vh
  min-width 1024px
  box-sizing border-box
  font-family "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif
</style>
